import React, { useState } from "react";
import XtermTerminal from "../es";

const Terminal = () => {
  const [term, setTerm] = useState<any>();
  const [api, setApi] = useState<any>();

  const loaded = (term, api) => {
    setTerm(term);
    setApi(api);
  };

  const onCommand = (cmd) => {
    api.writeln(`${cmd} hello Rasir!!!`);
    api.writeln("");
  };

  return (
    <div>
      <XtermTerminal
        colorRules={[
          { pattern: /error.*$/gi, color: "RED" },
          { pattern: /success/gi, color: "GREEN" },
        ]}
        lineTitle="$: "
        preLog="### START ###"
        height={300}
        onLoad={loaded}
        onCommand={onCommand}
      />
    </div>
  );
};

export default Terminal;
